// 商品详情渲染
class Details{
    constructor(){
        this.ulDet = document.querySelector(".ulDet");
        this.url = "http://localhost:666/static/data/goods.json";

        this.load();
        this.getId();
    }
    getId(){
        this.id = location.search.slice(1).split("=")[1];
        // console.log(this.id);
    }
    load(){
        ajax({
            url:this.url
        }).then((res)=>{
            this.res = JSON.parse(res);
            this.display()
        })
    }
    display(){
        this.res.forEach(val => {
            if(val.goodsId == this.id){
                // console.log(val);
                // console.log(val.img.smallImg);
                this.good = val;
                this.ulDet.innerHTML = `
                <li class="pic">
                    <div class="smallP">
                        <img src="${val.img.largeImg[0]}" alt="">
                        <span></span>
                    </div>
                    <div class="bigP">
                        <img src="${val.img.largeImg[0]}" alt="">
                    </div>
                    <div class="detailP clear_fix">
                        ${this.createP()}
                    </div>
                </li>
                <li class="deTail">
                    <h2>${val.name}</h2>
                    <div class="goods_t">
                        <dl>
                            <dt>商品号</dt>
                            <dd>${val.goodsId}</dd>
                        </dl>
                        <dl>
                            <dt>价格</dt>
                            <dd class="det_price">￥${val.price}</dd>
                        </dl>
                        <dl>
                            <dt>服务</dt>
                            <dd>本商品由邮乐网提供并进行相关配送和售后等服务</dd>
                        </dl>
                        <dl>
                            <dt>规格</dt>
                            <dd class="weight">${val.specifications}</dd>
                        </dl>
                        <dl>
                            <dt>数量</dt>
                            <dd><input type="number" value="${val.num}" min="1" id="num"></dd>
                        </dl>
                    </div>
                    <div class="det_bot">
                        <a class="add">加入购物车</a>
                        <a href="shopcar.html">去结算</a>
                    </div>
                </li>
                <li class="hotSale">
                    <h3>店铺热销</h3>
                    <div class="hh">假装有店铺</div>
                </li> `;
                new Large(val.img.largeImg);
                this.add();
            }
        });
    }
    createP(){
        let str = "";
        for(let i=0;i<this.good.img.smallImg.length;i++){
            str += `<p><img src="${this.good.img.smallImg[i]}" alt=""></p>`
        }
        return str
    }

    add(){
        var num1 = document.querySelector("#num");
        var that = this;
        this.ulDet.onclick = function (eve) {
            var e = eve || window.event;
            var tar = e.target || e.srcElement;
            if(tar.className == "add"){
                that.good.num = num1.value;
                // console.log(that.good);
                that.setData()
                alert("添加成功")
            }
            
        }
    }
    setData(){
        var gm = sessionStorage.getItem("goodsMsg");
        if(gm == null){
            gm = [{
                goodsId:this.good.goodsId,
                num:parseInt(this.good.num),
                name:this.good.name,
                price:this.good.price,
                pic:this.good.img.largeImg[0],
                specifications:this.good.specifications
            }]
        }else{
            gm = JSON.parse(gm);
            var bol = true;
            for(var i=0;i<gm.length;i++){
                if(gm[i].goodsId == this.good.goodsId){
                    gm[i].num = parseInt(gm[i].num) + parseInt(this.good.num);
                    bol = false;
                    break;
                }
            }
            if(bol == true){
                gm.push({
                    goodsId:this.good.goodsId,
                    num:parseInt(this.good.num),
                    name:this.good.name,
                    price:this.good.price,
                    pic:this.good.img.largeImg[0],
                    specifications:this.good.specifications
                })
            }
        }
        sessionStorage.setItem("goodsMsg",JSON.stringify(gm))
    }
}
new Details;






// 放大镜
class Large{
    constructor(imgData){
        this.sBox = $(".smallP");
        this.sImg = $(".smallP img");
        this.sSpan = $(".smallP span");
        this.bBox = $(".bigP");
        this.bImg = $(".bigP img");
        this.detailP = $(".detailP p");
        this.imgData = imgData;
        this.addEvent()
    }
    addEvent(){

        var that = this;
        this.sBox.mouseover(function(){
            that.over()
        })
        this.sBox.mousemove(function(eve){
            var e = eve || window.event;
            that.move(e);
        })
        this.sBox.mouseout(function(){
            that.out()
        })  
        this.detailP.on("click",function(){
            var inx = $(this).index();
            $(this).addClass("active").siblings().removeClass("active")
            that.sImg.attr("src",that.imgData[inx]);
            that.bImg.attr("src",that.imgData[inx]);
        })

    }
    over(){
        this.sSpan.css("display","block");
        this.bBox.css("display","block");
    }
    move(e){
        var l = e.pageX - this.sBox.offset().left - this.sSpan.width()/2;
        var t = e.pageY - this.sBox.offset().top - this.sSpan.height()/2;
        if(l<0) l=0;
        if(t<0) t=0;
        if(l > this.sBox.width() - this.sSpan.width()){
            l = this.sBox.width() - this.sSpan.width();
        }
        if(t > this.sBox.height() - this.sSpan.height()){
            t = this.sBox.height() - this.sSpan.height();
        }
        this.sSpan.css("left",l+"px");
        this.sSpan.css("top",t+"px");

        var x = l / (this.sBox.width() - this.sSpan.width());
        var y = t / (this.sBox.height() - this.sSpan.height());
        this.bImg.css("left",(this.bBox.width() - this.bImg.width()) * x + "px");
        this.bImg.css("top",(this.bBox.height() - this.bImg.height()) * y + "px");
    }
    out(){
        this.sSpan.css("display","none");
        this.bBox.css("display","none");
    }
}



// 综合的tab切换
$(".comp").find("li").click(function(){
    $(this).addClass("selected").siblings().removeClass("selected");
    $(".cont").children("div").css("display","none").eq($(this).index()).css("display","block");

})

// 登录成功
class Index{
    constructor(){
        this.login = document.querySelector(".h_login");
        this.wel = document.querySelector(".wel");
        this.logout = document.getElementById("logout");
        this.uName = document.getElementById("userName");
        this.shopcar = document.querySelector(".shopcar");
        this.init();
        this.addEvent();
    }
    init(){
        var that = this;
        this.m = sessionStorage.getItem("userMsg");
        this.m = this.m ? JSON.parse(this.m) : {};
        if(this.m.user){
            this.login.style.display = "none";
            this.wel.style.display = "none";
            this.logout.style.display = "block";
            this.uName.style.display = "block";
            this.uName.innerHTML = this.m.user;
        }
        this.shopcar.onclick = function () {
            if(that.m.user){
                location.href = "shopcar.html"
            }else{
                location.href = "register.html"
            }
        }

    }
    addEvent(){
        this.logout.onclick = function(){
            sessionStorage.removeItem("userMsg");
            location.reload();
        }
    }
}
new Index;
